<template>
  <view style="height: 100%;overflow: hidden">
    <u-navbar :is-back="false" title="我的订单" :is-fixed="true" title-color="#000"
              :border-bottom="false">
      <view class="slot-wrap">
        <view class="navbar-right">
          <view class="message-box right-item" @click="back" style="margin-top: 6upx">
            <u-icon name="arrow-left" size="32"></u-icon>
          </view>
          <view class="line"></view>
					<view @click="jump"
							v-if="!canExcharge" class="message-box right-item" style="margin-top: 6upx">
            <u-icon name="home-fill" size="32"></u-icon>
					</view>
          <navigator v-else url="/pages/user/excharge" class="right-item rigth-txt">兑换产品</navigator>
        </view>
      </view>
    </u-navbar>

    <scroll-view scroll-y id="listId" :style="{height: video_height + 'px'}" v-if="orderList.length > 0">
			<div v-for="(item,index) in orderList" :key="index"
					 class="bg-fff mg_t_10 item_list">
				<div class="row cont-center yh_bd_bottom pd_t_30 pd_b_30" @click="showDetail(item)">
					<div class="flex-1 font-26 col-333 pd_l_30">订单号：{{item.orderNum}}</div>
					<div v-if="item && item.orderStatus == 1" class="font-26 col-999 pd_r_30">待支付</div>
					<div v-if="item && item.orderStatus == 2" class="font-26 col-999 pd_r_30">已支付</div>
					<div v-if="item && item.orderStatus == 3" class="font-26 col-999 pd_r_30">已关闭</div>
					<div v-if="item && item.orderStatus == 4" class="font-26 col-999 pd_r_30">已发货</div>
				</div>
				<div class="row cont-center pd_l_30 pd_r_30 pd_t_30 pd_b_30 yh_bd_bottom" @click="showDetail(item)">
					<div class="left-img">
						<img :src="item.goodsCovers && item.goodsCovers[0]" />
						<div v-if="item.orderType == 2" class="zt font-22 col-fff text-cent">抢购</div>
						<div v-if="item.orderType == 3" class="zt font-22 col-fff text-cent">拼团</div>
					</div>
					<div class="pd_l_30">
						<div class="font-28 font-b col-333 pd_b_10">{{item.goodsName}}</div>
						<!-- <div v-if="item.goodsStandardVO.type == 1" class="font-24 col-999">规格：{{item.goodsStandardVO.length}}个月</div>
						<div v-if="item.goodsStandardVO.type == 2" class="font-24 col-999">规格：{{item.goodsStandardVO.length}}年</div> -->
						<div class="font-24 col-999">规格：{{item.goodsStandardVO && item.goodsStandardVO.desc}}</div>
						<div class="font-24 col-999 pd_b_20">数量：{{item.goodsNum}}</div>
						<div class="font-28 col-1f476d">￥{{item.orderMoney}}</div>
					</div>
				</div>
				<!-- 待支付显示 -->
				<view v-if="item && item.orderStatus && item.orderStatus == 1"
							class="row cont-center pd_t_30 pd_b_30">
					<div class="flex-1 font-24 col-333 pd_l_30">订单将于
						<u-count-down :timestamp="item.show_stamp"
													separator="zh"
													font-size="24"
													separator-size="24"
													separator-color="#1f476d"
													color="#1f476d"></u-count-down>
						后自动关闭
					</div>
					<navigator :url="`/pages/goods/pay?orderMoney=${item.orderMoney}&orderNum=${item.orderNum}`" class="font-26 col-1f476d mg_r_30 text-cent btn-style" style="border: 0.01rem solid #1f476d;">
						立即支付
          </navigator>
				</view>
				<!-- 拼团显示 -->
				<div v-if="item.orderType == 3 && (item && item.orderStatus == 2)" class="row cont-center pd_t_30 pd_b_30">
					<div class="flex-1"></div>
          <button plain class="btn-style font-26 col-FF6251 mg_r_30 text-cent"
                    open-type="share" :data-order-id="item.id"
                    :custom-style="customStyle1">分享</button>
				</div>
				<!-- 物流显示 -->
				<div v-if="item && item.orderStatus == 4" class="row cont-center pd_t_30 pd_b_30">
					<div class="flex-1"></div>
					<button plain class="btn-style font-26 col-FF6251 mg_r_30 text-cent"
									@click="showWuliu(item.id, item)" :data-order-id="item.id"
									:custom-style="customStyle1">查看物流</button>
				</div>
			</div>
		</scroll-view>
		<div class="no-data-img" v-if="orderList.length < 1">
			<u-empty text="暂无订单信息~" mode="order"></u-empty>
		</div>
		<u-popup v-model="show" mode="bottom" height="100%">
			<view>
				<u-navbar back-text="返回" title-color="#000" :is-fixed="true" title="订单详情" :custom-back="hideDetail"></u-navbar>
				<scroll-view scroll-y id="detailsId" :style="{height: inner_height + 'px'}">
					<navigator :url="`/pages/goods/index?id=${list.goodsId}`" class="row cont-center bg-fff pd_t_30 pd_b_30 pd_l_30 pd_r_30">
						<div class="left-img">
							<img v-for="(item,index) in list.goodsCovers" :key="index" v-if="index == 0" :src="item" />
						</div>
						<div class="pd_l_30">
							<div class="font-28 font-b col-333 pd_b_10">{{list.goodsName}}</div>
							<div class="font-24 col-999">规格：{{goodsStandardVO.desc}}</div>
						</div>
					</navigator>
					<div class="bg-fff pd_l_30 pd_r_30 mg_t_10">
						<div class="row cont-center yh_bd_bottom pd_t_30 pd_b_30">
							<div class="flex-1 font-28 col-666">商品金额</div>
							<div class="font-28 col-666">￥{{goodsStandardVO.price}}</div>
						</div>
						<div class="row cont-center yh_bd_bottom pd_t_30 pd_b_30">
							<div class="flex-1 font-28 col-666">商品数量</div>
							<div class="font-28 col-666">{{list.goodsNum}}</div>
						</div>
						<div v-if="goodsStandardVO.price != list.orderMoney">
							<div v-if="list.orderType == 2 || list.orderType == 3" class="row cont-center yh_bd_bottom pd_t_30 pd_b_30">
								<div class="flex-1 font-28 col-666">优惠</div>
								<div class="font-28 col-1f476d pd_r_10">-￥{{(goodsStandardVO.price - list.orderMoney).toFixed(2)}}</div>
								<div v-if="list.orderType == 2" class="font-22 col-fff bg-FF6251 pd_l_10 pd_r_10">限时抢购</div>
								<div v-if="list.orderType == 3" class="font-22 col-fff bg-FF6251 pd_l_10 pd_r_10">拼团优惠</div>
							</div>
						</div>
						<div class="row cont-center yh_bd_bottom pd_t_30 pd_b_30">
							<div class="flex-1 font-28 col-333">应付总额</div>
							<div class="font-28 col-1f476d">￥{{list.orderMoney}}</div>
						</div>
					</div>
					<div class="bg-fff pd_l_30 pd_r_30 mg_t_10">
						<div class="row cont-center yh_bd_bottom pd_t_30 pd_b_30">
							<div class="flex-1 font-26 col-333">订单编号</div>
							<div class="font-26 col-333">{{list.orderNum}}</div>
						</div>
						<div class="row cont-center yh_bd_bottom pd_t_30 pd_b_30">
							<div class="flex-1 font-26 col-333">订单状态</div>
							<div v-if="list.orderStatus == 1" class="font-26 col-333">待支付</div>
							<div v-if="list.orderStatus == 2" class="font-26 col-333">已支付</div>
							<div v-if="list.orderStatus == 3" class="font-26 col-333">已关闭</div>
							<div v-if="list.orderStatus == 4" class="font-26 col-333">已发货</div>
						</div>
						<div class="row cont-center yh_bd_bottom pd_t_30 pd_b_30">
							<div class="flex-1 font-26 col-333">订单类型</div>
							<div v-if="list.orderType == 1" class="font-26 col-333">普通</div>
							<div v-if="list.orderType == 2" class="font-26 col-333">限时抢购</div>
							<div v-if="list.orderType == 3" class="font-26 col-333">拼团</div>
							<div v-if="list.orderType == 4" class="font-26 col-333">兑换</div>
						</div>
					</div>
					<div class="bg-fff pd_l_30 pd_r_30 mg_t_10">
						<div class="row cont-center yh_bd_bottom pd_t_30 pd_b_30">
							<div class="flex-1 font-26 col-333">下单时间</div>
							<div class="font-26 col-333">{{list.createTime}}</div>
						</div>
						<div v-if="list.orderStatus == 2" class="row cont-center yh_bd_bottom pd_t_30 pd_b_30">
							<div class="flex-1 font-26 col-333">支付时间</div>
							<div class="font-26 col-333">{{list.payTime}}</div>
						</div>
						<div v-if="list.orderStatus == 2" class="row cont-center yh_bd_bottom pd_t_30 pd_b_30">
							<div class="flex-1 font-26 col-333">支付方式</div>
							<div v-if="list.payType == 1" class="font-26 col-333">银联</div>
							<div v-if="list.payType == 2" class="font-26 col-333">支付宝</div>
							<div v-if="list.payType == 3" class="font-26 col-333">微信</div>
							<div v-if="list.payType == 4" class="font-26 col-333">其他</div>
						</div>
					</div>
					<div class="bg-fff pd_l_30 pd_r_30 mg_t_10" v-if="list.orderAddress">
						<div class="row cont-center yh_bd_bottom pd_t_30 pd_b_30">
							<div class="flex-1 font-26 col-333">邮寄地址</div>
							<div class="font-26 col-333 u-text-right" style="width: 70%">
								<view>{{list.orderAddress.split('#')[0] || ''}}</view>
								<view>
									{{list.orderAddress.split('#')[1] || ''}}
									<text class="u-p-l-10">{{list.orderAddress.split('#')[2] || ''}}</text>
								</view>
							</div>
						</div>
					</div>
				</scroll-view>
				<!-- 订单状态为待支付显示 -->
				<div v-if="list.orderStatus == 1" style="justify-content: space-between"
						 class="row cont-center pd_t_30 pd_b_30 bg-fff up-btn">
					<div class="font-24 col-333 pd_r_68 pd_l_30 row">订单将于
						<u-count-down :timestamp="timeStar(list)"
												separator="zh"
												font-size="24"
												separator-size="24"
												separator-color="#1f476d"
												color="#1f476d"></u-count-down>后关闭</div>
					<navigator :url="`/pages/goods/pay?orderMoney=${list.orderMoney}&orderNum=${list.orderNum}`"
                     @click="hideDetail"
                     class="font-26 col-1f476d mg_r_30 text-cent btn-style" style="border: 0.01rem solid #1f476d;">
            立即支付
          </navigator>
				</div>
				<!-- 订单类型为拼团时显示 -->
				<div v-if="list.orderType == 3 && list.orderStatus == 2"
						 style="padding-left: 2%;padding-right: 2%"
						 class="pd_t_30 pd_b_30 bg-fff up-btn">
					<button plain class="btn-style font-26 col-FF6251 mg_r_30 text-cent"
									open-type="share" :data-order-id="list.id"
									:custom-style="customStyle1">分享</button>
					<!--<u-button type="primary" shape="circle" :custom-style="customStyle">分享拼团</u-button>-->
				</div>
			</view>
		</u-popup>
		<u-popup v-model="show1" mode="bottom" height="80%" border-radius="20">
			<view scroll-y style="height: 100%; padding: 20upx;box-sizing: border-box">
				<u-form  ref="uForm" label-width="140">
          <u-form-item label="发货时间" v-if="wuliuData">
						<view class="u-text-right">
							{{$u.timeFormat(wuliuData.shipmentTime, 'yyyy-mm-dd hh:MM:ss')}}
						</view>
					</u-form-item>
					<u-form-item label="物流单号" v-if="wuliuData">
						<view class="u-text-right">
							{{wuliuData.ShipperCode | wuliuType}}
              <text class="u-p-l-10">{{wuliuData.LogisticCode}}</text>
              <text class="u-p-l-10 color-active" @click="copy(wuliuData.LogisticCode)">复制</text>
						</view>
					</u-form-item>
				</u-form>
				<scroll-view style="box-sizing: border-box;height: calc(100% - 220upx)" scroll-y>
          <view class="u-p-30">
            <u-time-line>
              <u-time-line-item v-for="item in wuliuData.Traces" style="margin-left: 10px">
                <template v-slot:content>
                  <view>
                    <view class="u-order-title">{{ item.AcceptStation }}</view>
                    <view class="u-order-time">{{ item.AcceptTime }}</view>
                  </view>
                </template>
              </u-time-line-item>
            </u-time-line>
          </view>
				</scroll-view>
			</view>
		</u-popup>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import {TOAST} from "../../util/util";

  export default {
		data() {
			return {
        orderList: [],
				show: false,
				list: {},
				type: '',
				timeText: '',
				goodsStandardVO: {},
				customStyle: {
					background: '#1f476d',
					padding: '0 30rpx'
				},
        customStyle1: {
          fontSize: '26rpx',
          padding: '0 20rpx',
          height: '54rpx',
				  lineHeight: '54rpx',
          background: '#fff',
          color: '#1f476d',
          border: '1px solid #1f476d'
        },
				canExcharge: 0,
				show1: false,
				wuliuData: {},
			}
		},
		computed: {
			video_height() {
				let info = uni.getSystemInfoSync()
				let width = info.windowHeight
				let video_width = width - 44
				return video_width
			},
			inner_height() {
				let info = uni.getSystemInfoSync()
				let width = info.windowHeight
				let video_width = width - 44 - uni.upx2px(140)
				return video_width
			}
		},

		filters: {
			wuliuType(val) {
				var types = [{"key":"SF","label":"顺丰速运"},{"key":"HTKY","label":"百世快递"},{"key":"ZTO","label":"中通快递"},{"key":"STO","label":"申通快递"},{"key":"YTO","label":"圆通速递"},{"key":"YD","label":"韵达速递"},{"key":"YZPY","label":"邮政快递包裹"},{"key":"EMS","label":"EMS"},{"key":"HHTT","label":"天天快递"},{"key":"JD","label":"京东快递"},{"key":"UC","label":"优速快递"},{"key":"DBL","label":"德邦快递"},{"key":"ZJS","label":"宅急送"}]
				var type = types.filter(item => item.key == val)
				if (type.length) {
					return type[0].label
				} else {
					return '未知'
				}
			}
		},

    mounted() {
			this.checkExchage()
    },

		onShow() {
			this.getOrders()
		},

    onShareAppMessage(res) {
		  let path = ''
      if (res.from === 'button') {// 来自页面内分享按钮
        let storage = uni.getStorageSync('zbz_user');
        path += `/pages/goods/share_goods?userId=${storage.userId}&orderId=${res.target.dataset.orderId}`
      }
      return {
        title: '快来拼团！简单测评，精准选科！',
        imageUrl: '../../static/img/pintuan.png',
        path: path ? path : '/pages/index/index'
      }
    },

		methods: {
		  copy (txt) {
        uni.setClipboardData({
          data: txt,
          success: function () {
            TOAST("复制成功")
          }
        });
      },
			showWuliu(id, item) {
				request({
					url: '/system/wx/order/getShipmentListByNumber/' + id,
					token: true,
					method: 'post',
					platform: 'weixin'
				}).then(res => {
          let data = JSON.parse(res.msg)
          if (data.Traces && data.Traces.length) {
            data.Traces = data.Traces.reverse()
          }
					this.wuliuData = data
          this.wuliuData.shipmentTime = new Date(item.shipmentTime).getTime()
					this.show1 = true
				})
			},
			getOrders() {
				request({
					url: '/app/userCenter/getOrders'
				}).then(ret => {
					ret.data.forEach(item => {
						if (item.orderStatus == 1) {
							item.show_stamp = this.timeStar(item)
						}
					})
					this.orderList = ret.data;
				})
			},

			jump() {
				this.$u.route({
					url: '/pages/index/index',
					type: 'switchTab'
				})
			},

			back() {
				uni.navigateBack()
			},

			showDetail(item) {
				this.list = item
				this.show = true
				this.type = item.goodsStandardVO.type;
				this.goodsStandardVO = item.goodsStandardVO;
			},

			hideDetail() {
				this.show = false
				this.list = {}
				this.type = ''
				this.goodsStandardVO = {}
				this.getOrders()
			},

			openWindow () {

			},
			openWindowFrame() {

			},

			timeStar(item) {
				var starttime = item.lastPayTimeStamp;
				var nowtime = new Date().getTime();
				return (starttime - nowtime) / 1000
			},

			checkExchage() {
				request({
					url: '/system/exCode/get/configStatus'
				}).then(ret => {
					this.canExcharge = ret.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-size: 28rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
	page {
		background: #F7F7F7;
	}
	.left-img {
			width: 160upx;
			height: 160upx;
    position: relative;
			image {
				width: 100%;
				height: 100%;
			}
		}
	.btn-style {
    width: 188upx;
    height: 54upx;
    line-height: 54upx;
    border-radius: 27upx;
    box-sizing: border-box;
    color: #1f476d;
    border: 1px solid #1f476d;
    &::after {
      border: none;
    }
  }
	#detailsId {
		background: #F7F7F7;
		overflow: hidden;
		.up-btn {
			width: 100%;
			position: fixed;
			bottom: 0;
		}
	}
	#listId {
		height: 100%;
		background: #F7F7F7;
		padding-bottom: 60upx;
		padding-left: 2%;
		padding-right: 2%;
		box-sizing: border-box;
		.item_list {
			border-radius: 8upx;

		}
	}
	.no-data-img {
		min-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: -50upx;
	}

  .navbar-right {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 10px;
    border: 1px solid rgba(10,10,10,.1);
    background: rgba(255,255,255, .6);
    border-radius: 18px;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: -3px;
    line-height: 32px;
  }
  .line {
    width: 1px;
    background: rgba(252, 252, 252, 0.3);
    background: rgba(0, 0, 0, 0.2);
    height: 18px;
  }
  .rigth-txt {
    font-size: 14px;
    padding: 0;
    line-height: 32px;
    padding-right: 5px;
    padding-right: 20upx;
    padding-left: 20upx;
  }
  .message-box {
    padding-left: 15upx;
    padding-right: 20upx;
  }

  .zt {
    width: 64upx;
    height: 34upx;
    background: #FE642C;
    border-radius: 0 0 12upx 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  .u-time-axis {
    margin-left: 10px;
  }
</style>
